<template>
  <div id="grade">
    <div ref="box" class="box"></div>
    <div class="notFound" v-if="isNull">
      <i class="iconfont icon-LC_icon_tips_fill"></i><span>该考生未参加考试</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "grade",
  data() {
    return {
      isNull: false,
      tableDataX: [], // x轴数据 - 考试科目
      tableDataY: [], // y轴数据 - 考试成绩
      examData: []    // 存储完整的考试数据
    }
  },
  mounted() {
    this.score();
  },
  methods: {
    score() {
      let studentId = this.$route.query.studentId
      this.$axios(`/api/score/${studentId}`).then(res => {
        if (res.data.code == 200) {
          this.examData = res.data.data;
          if (this.examData.length === 0) {
            this.isNull = true;
            return;
          }

          // 按考试时间排序
          this.examData.sort((a, b) => new Date(a.answerDate) - new Date(b.answerDate));

          // 准备图表数据
          this.examData.forEach((exam, index) => {
            this.tableDataX.push(`${exam.subject} (${exam.answerDate})`);
            this.tableDataY.push(exam.etScore);
          });

          // 计算y轴范围
          const maxScore = Math.max(...this.tableDataY);
          const minScore = Math.min(...this.tableDataY);
          const yAxisMax = Math.ceil(maxScore / 10) * 10 + 10; // 向上取整到最近的10的倍数再加10
          const yAxisMin = Math.max(0, Math.floor(minScore / 10) * 10 - 10); // 向下取整到最近的10的倍数减10，但不小于0

          // 初始化图表
          let boxDom = this.$refs["box"];
          let scoreCharts = this.$echarts.init(boxDom);

          let option = {
            title: {
              text: '考试成绩统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: params => {
                const exam = this.examData[params[0].dataIndex];
                return `
                  科目: ${exam.subject}<br/>
                  分数: ${exam.etScore}<br/>
                  日期: ${exam.answerDate}<br/>
                  考试编号: ${exam.examCode}
                `;
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: "category",
              data: this.tableDataX,
              axisLabel: {
                interval: 0,
                rotate: 30, // 如果科目名太长可以旋转30度
                formatter: value => {
                  // 简化显示，只显示科目名前5个字符
                  return value.length > 10 ? value.substring(0, 10) + '...' : value;
                }
              }
            },
            yAxis: {
              type: "value",
              name: '分数',
              min: yAxisMin,
              max: yAxisMax,
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: '{value} 分'
              },
              splitLine: {
                show: true
              }
            },
            series: [
              {
                name: '考试成绩',
                data: this.tableDataY,
                type: "line",
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: '#1890ff',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                lineStyle: {
                  width: 3
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}分'
                },
                emphasis: {
                  itemStyle: {
                    color: '#ff4d4f'
                  }
                }
              }
            ]
          };

          scoreCharts.setOption(option);

          // 窗口大小变化时重新调整图表大小
          window.addEventListener('resize', function () {
            scoreCharts.resize();
          });

        } else {
          this.isNull = true;
        }
      }).catch(() => {
        this.isNull = true;
      });
    }
  }
};
</script>

<style lang="less" scoped>
#grade {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .box {
    width: 100%;
    height: 500px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
  }

  .notFound {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #999;

    i {
      font-size: 50px;
      display: block;
      margin-bottom: 10px;
    }

    span {
      font-size: 16px;
    }
  }
}
</style>
